<template>
	<view class="com-alert-pop" v-if="alertShow">
		<view class="rk-mask" v-if="alertShow"></view>
		<view class="popup-alert" :class="alertShow?'popup-active':''">
			<view class="title">请输入其他病症</view>
			<view class="right-top-close" @click="clickClose">
				<text class="iconfont icon-guanbi"></text>
			</view>
			<view class="input-box">
				<view class="input-content">
					<input type="text" placeholder="请输入其他病症" v-model="inputValue" />
					<text v-if="showClear" class="iconfont icon-guanbi1" @click="clickClear"></text>
				</view>
			</view>
			<view class="submit-box" @click="clickSure">
				<view class="submit">确认</view>
			</view>

		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'rk-alert',
		props: {
			alertShow: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			inputValue: {
				immediate: true,
				handler(n, o) {
					if (n.length > 0) {
						this.showClear = true;
					} else {
						this.showClear = false;
					}
				}
			}
		},
		data() {
			return {
				inputValue: '',
				showClear: false,
				
			}
		},
		
		methods: {
			
			clickClose() {
				this.$emit('close')
			},
			clickClear() {
				this.inputValue = '';
			},
			clickSure() {
				if (this.inputValue.trim().length <= 0) {
					return this.$util.Tips({
						title: '请输入病症'
					})
				}
				this.$emit('confirm', this.inputValue);
				this.inputValue = '';
			}
		}
	}
</script>

<style lang="scss">
	.rk-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 100;
	}

	.popup-alert {
		position: fixed;
		top: 45%;
		left: 50%;
		z-index: 101;
		width: 544rpx;
		padding-top: 48rpx;
		// padding-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: 0.3s;
		line-height: 1;
		text-align: center;
		color: #282828;

		.right-top-close {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			padding: 20rpx;

			.iconfont {
				color: #ccc;
			}
		}


		.input-box {
			padding: 30rpx 20rpx;

			.input-content {
				border-bottom: 1rpx solid #ccc;
				display: flex;
				align-items: center;

				input {
					text-align: left;
					height: 40px;
					width: calc(100% - 18px);
					font-size: 14px;
				}

				.iconfont {
					color: #969696;
					font-size: 18px;
				}
			}

		}

		.submit-box {
			margin: 30rpx 0;
			display: flex;
			justify-content: center;

			.submit {
				background-color: var(--view-theme);
				display: flex;
				justify-content: center;
				width: 90%;
				padding: 20rpx 0;
				color: #fff;
				border-radius: 100px;
			}
		}

	}

	.popup-active {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
</style>